@import "variables.less";
@import "reset.less";
@import "global.less";
@import "components.less";
@import  "iconfonts.css";

/* general style */
.toast{
  .valign;
  position: fixed;
  z-index: 100;
  min-width: 8rem;
  min-height: 6rem;
  border-radius: 8px;
  background-color: @black53;
  text-align: center;
  padding: 1rem;
  &:before{
    position: absolute;
    left: 50%;
    top: 1rem;
    -webkit-transform: translateX(-50%);
    .q(2rem);
    font-family: 'icomoon';
    font-size: 1.5rem;
    border-radius: 50%;
  }
  &.warning{
    padding-top: 4rem;
    &:before{
      content: "\e910";
      color: @white87;
      font-size: 1.25rem;
      background-color: @color3;
    }
  }
  & > *{
    color: @white87;
  }
}
/* product-schedule */
.product-schedule{
  & > header.overdue{
    background-color: #ff2328;
  }
  & > section{
    & > header{
      .flex;
      background-color: #fff;
      min-height: 2.5rem;
      margin-bottom: 1rem;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
      h2{
        .flex-weight;
        .text-center;
        &:last-child{
          border-left: 1px solid @border-color;
        }
        .icon{
          margin-right: 0.5rem;
          &.icon-box{
            color: @theme-color1;
          }
          &.icon-cover{
            color: @theme-color2;
          }
        }
      }
    }
    section{
      .total,
      .today,
      .flow{
        background-color: #fff;
        padding: 0 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
        & > h3{
          line-height: 2.5rem;
          border-bottom: 1px solid @border-color;
          font-weight: normal;
        }
      }
      .total > div,
      .today > div{
        .flex;
        padding: 1rem 0;
        & > div {
          .flex-weight;
          .text-center;
          position: relative;
        }
      }
      .total{
        & > div > div{
          .count{
            font-size: 1.5rem;
          }
          .progress-bar{
            margin: 2.75rem 1rem 0.5rem 1rem;
            position: relative;
            .percent {
              position: absolute;
              top: -2.75rem;
              left: 0;
              margin-left: -1rem;
              display: inline-block;
              height: 2rem;
              width: 2rem;
              line-height: 2rem;
              text-align: center;
              font-size: 0.75rem;
              color: #fff;
              z-index: 1;
              &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: @theme-color1;
                border-radius: 50% 50% 0 50%;
                -webkit-transform: rotate(45deg);
                z-index: -1;
              }
            }
          }
          &.cover-progress{
            .progress-bar{
              .percent:after{
                background-color: @theme-color2;
              }
              .progress-bar-inner{
                background-color: @theme-color2;
              }
            }
          }
        }
      }
      .today{
        .pie-wrapper > div{
          position: relative;
          min-height: 6rem;
          .pie {
            position: absolute;
            .valign;
            border-radius: 50%;
            background-color: #dcdcdc;
            overflow: hidden;
            &:before{
              content: '';
              position: absolute;
              .valign;
              background-color: #fff;
              border-radius: 50%;
              z-index: 1;
            }
            &:after{
              content: '';
              display: block;
              margin-left: 50%;
              height: 100%;
              background-color: inherit;
              transform-origin: left;
            }
            @keyframes spin {
              to{
                transform: rotate(.5turn);
              }
            }
            @keyframes box-bg1 {
              50%{
                background: @box-pie-color1;
              }
              100%{
                background: @box-pie-color1;
              }
            }
            @keyframes box-bg2 {
              50%{
                background: @box-pie-color2;
              }
              100%{
                background: @box-pie-color2;
              }
            }
            @keyframes box-bg3 {
              50%{
                background: @box-pie-color3;
              }
              100%{
                background: @box-pie-color3;
              }
            }
            @keyframes cover-bg1 {
              50%{
                background: @cover-pie-color1;
              }
              100%{
                background: @cover-pie-color1;
              }
            }
            @keyframes cover-bg2 {
              50%{
                background: @cover-pie-color2;
              }
              100%{
                background: @cover-pie-color2;
              }
            }
            @keyframes cover-bg3 {
              50%{
                background: @cover-pie-color3;
              }
              100%{
                background: @cover-pie-color3;
              }
            }
            &.pie-work-shift{
              height: 2rem;
              width: 2rem;
              z-index: 3;
              &:before{
                height: 1.25rem;
                width: 1.25rem;
              }
            }
            &.pie-today{
              height: 4rem;
              width: 4rem;
              z-index: 2;
              &:before{
                height: 3.25rem;
                width: 3.25rem;
              }
            }
            &.pie-accumulate{
              height: 6rem;
              width: 6rem;
              z-index: 1;
              &:before{
                height: 5.25rem;
                width: 5.25rem;
              }
            }
          }
          &.box-pie{
            .pie{
              &.pie-work-shift{
                background-image: linear-gradient(to right, transparent 50%, @box-pie-color1 0);
                &:after{
                  animation: spin 50s linear 2 forwards,
                  box-bg1 100s step-end 1 forwards;
                  animation-play-state: paused;
                  animation-delay: inherit;
                }
              }
              &.pie-today{
                background-image: linear-gradient(to right, transparent 50%, @box-pie-color2 0);
                &:after{
                  animation: spin 50s linear 2 forwards,
                  box-bg2 100s step-end 1 forwards;
                  animation-play-state: paused;
                  animation-delay: inherit;
                }
              }
              &.pie-accumulate{
                background-image: linear-gradient(to right, transparent 50%, @box-pie-color3 0);
                &:after{
                  animation: spin 50s linear 2 forwards,
                  box-bg3 100s step-end 1 forwards;
                  animation-play-state: paused;
                  animation-delay: inherit;
                }
              }

            }
          }
          &.cover-pie{
            .pie{
              &.pie-work-shift {
                background-image: linear-gradient(to right, transparent 50%, @cover-pie-color1 0);
                &:after {
                  animation: spin 50s linear 2 forwards,
                  cover-bg1 100s step-end 1 forwards;
                  animation-play-state: paused;
                  animation-delay: inherit;
                }
              }
              &.pie-today {
                background-image: linear-gradient(to right, transparent 50%, @cover-pie-color2 0);
                &:after {
                  animation: spin 50s linear 2 forwards,
                  cover-bg2 100s step-end 1 forwards;
                  animation-play-state: paused;
                  animation-delay: inherit;
                }
              }
              &.pie-accumulate {
                background-image: linear-gradient(to right, transparent 50%, @cover-pie-color3 0);
                &:after {
                  animation: spin 50s linear 2 forwards,
                  cover-bg3 100s step-end 1 forwards;
                  animation-play-state: paused;
                  animation-delay: inherit;
                }
              }
            }
          }
        }
        .caption{
          padding-top: 0;
          p{
            height: 1.5rem;
            line-height: 1.5rem;
            & > *{
              &:last-child{
                display: inline-block;
                width: 2rem;
                text-align: left;
              }
              & + *{
                margin-left: 0.5rem;
              }
            }
          }
          .color{
            display: inline-block;
            width: 1.5rem;
            height: 0.5rem;
          }
          .box-caption{
            .color1{
              background-color: @box-pie-color1;
            }
            .color2{
              background-color: @box-pie-color2;
            }
            .color3{
              background-color: @box-pie-color3;
            }
          }
          .cover-caption{
            .color1{
              background-color: @cover-pie-color1;
            }
            .color2{
              background-color: @cover-pie-color2;
            }
            .color3{
              background-color: @cover-pie-color3;
            }
          }
        }
      }
      .flow{
        position: relative;
        .tabs{
          position: absolute;
          top: 0.5rem;
          right: 2rem;
          border-bottom: none;
          & > a{
            .u(1.5rem);
            padding: 0 0.5rem;
            border: 1px solid @theme-color2;
            & + a{
              margin-left: -1px;
            }
            &.active, &:active{
              position: relative;
              background-color: @theme-color2;
              color: #fff;
              z-index: 1;
            }
          }
        }
        .steps-wrapper{
          h4{
            position: relative;
            display: inline-block;
            padding: 0 8px;
            margin-top: 1rem;
            line-height: 1.5rem;
            font-size: .9375rem;
            text-align: center;
            color: @white87;
            &:after{
              content: '';
              position: absolute;
              box-sizing: border-box;
              border-width: 12px 8px;
              border-style: solid;
              top: 0;
              right: -1rem;
            }
            &.box-title{
              background-color: @theme-color1;
              &:after{
                border-color: transparent transparent transparent @theme-color1;
              }
            }
            &.cover-title{
              background-color: @theme-color2;
              &:after{
                border-color: transparent transparent transparent @theme-color2;
              }
            }
          }
          & > ol {
            background-color: #fff;
            .detail{
              display: -webkit-flex;
              -webkit-flex-flow: row;
              -webkit-box-orient: horizontal;
              -webkit-align-items: center;
              -webkit-justify-content: space-between;
              h5{
                font-size: .9375rem;
              }
              .data{
                text-align: right;
                & > span{
                  display: inline-block;
                  position: relative;
                  padding-bottom: 1rem;
                  margin-left: .25rem;
                  min-width: 32px;
                  text-align: center;
                  font-size: .875rem;
                  &:after{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    height: 1rem;
                    line-height: 1rem;
                    width: 100%;
                    font-size: .75rem;
                    color: @black53;
                  }
                  &.uph{
                    color: #4fc3f7;
                    &:after{
                      content: 'UPH';
                    }
                  }
                  &.input{
                    color: #fbd155;
                    &:after{
                      content: '流入';
                    }
                  }
                  &.plan{
                    color: @black87;
                    &:after{
                      content: '计划';
                    }
                  }
                  &.good-product{
                    color: #9ccc65;
                    &:after{
                      content: '良品';
                    }
                  }
                  &.bad-product{
                    color: #ff3742;
                    &:after{
                      content: '次品';
                    }
                  }
                }
              }
            }
            .plan-bar{
              height: 0.5rem;
              margin-top: .25rem;
              background-color: #eee;
              box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24) inset;
              overflow: hidden;
              div{
                height: 100%;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28) inset;
                &.input-bar {
                  background-color: #fbd155;
                }
                &.output-bar{
                  .flex;
                }
                &.good-product-bar{
                  background-color: #9ccc65;
                }
                &.bad-product-bar{
                  background-color: #ff3742;
                }
              }
            }
            &.box-steps{
              & > li{
                &.step1:before{
                  content: "\e90d";
                }
                &.step2:before{
                  content: "\e90e";
                }
                &.step3:before{
                  content: "\e90a";
                }
                &.step4:before{
                  content: "\e903";
                }
              }
            }
            &.cover-steps{
              & > li{
                &:before{
                  color: @theme-color2;
                }
                &.step1:before{
                  content: "\e90d";
                }
                &.step2:before{
                  content: "\e90e";
                }
                &.step3:before{
                  content: "\e90c";
                }
                &.step4:before{
                  content: "\e907";
                }
                &.step5:before{
                  content: "\e90f";
                }
                &.step6:before{
                  content: "\e902";
                }
                &.step7:before{
                  content: "\e90a";
                }
                &.step8:before{
                  content: "\e903";
                }
                &:after{
                  border-left: 2px dotted @theme-color2;
                }
              }
              .progress-bar-inner{
                background-color: @theme-color2;
              }
            }
          }
        }
      }
    }
  }
}

.order-list{
  .vflex;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  display: none;
  z-index: 100;
  & > header {
    background-color: @theme-color1;
    min-height: 2.75rem;
    width: 100%;
    position: relative;
    padding: 0 3.5rem;
    h1 {
      .u(2.75rem);
      font-size: 1.125rem;
      color: @white87;
      .text-center;
    }
    .icon{
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      width: 3.5rem;
      height: 2.75rem;
      padding: 0 1rem;
      line-height: 2.75rem;
      color: @white87;
      font-size: 1.125rem;
      text-align: center;
    }
  }
  & > section{
    .flex-weight;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    ul > li{
      position: relative;
      padding: 1rem 1rem 1rem 3rem;
      border-bottom: 1px solid @border-color;
      background-color: #fff;
      .icon{
        position: absolute;
        top: 50%;
        left: .5rem;
        -webkit-transform: translateY(-50%);
        .q(2rem);
      }
      &:active, &.active{
        background-color: fadeOut(@theme-color1, 90%);
      }
      &.active{
        .icon:before{
          content: "\e900";
          font-family: 'icomoon';
          color: @theme-color1;
          font-size: 1.5rem;
        }
      }
      p{
        color: @black87;
        font-size: .9375rem;
        &:last-child{
          .flex;
          .amount{
            position: relative;
            margin-left: 1rem;
            padding-left: 1rem;
            &:before{
              content: "\e90b";
              font-family: 'icomoon';
              .valign-left;
              color: @theme-color1;
            }
          }
        }
      }
    }
  }
}

/* factory-list */
.factory-list{
    ul.nav{
      background-color: #fff;
      width: 100%;
      li{
        padding: 0 1rem;
        border-bottom: 1px solid @border-color;
        font-size: 1.0625rem;
        &:last-child{
          border-bottom: none;
        }
        &:active{
          background-color: darken(#fff, 5%);
        }
        & > a{
          position: relative;
          display: block;
          .u(3rem);
          padding-left: 2.5625rem;
          color: @black87;
          img{
            position: absolute;
            top: 50%;
            left: 0;
            -webkit-transform: translateY(-50%);
            .q(1.5625rem);
          }
        }
      }
    }
}

.table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: center;
  th{
    font-weight: normal;
  }
  td,th{
    border-top: 1px solid @border-color;
    border-bottom: 1px solid @border-color;
    .u(2rem);
    padding: 0 .5rem;
  }
}
